<template>
  <div id="fileDetail">
    <header>
      <i @click="goBack()"></i>
      <div>文件详情</div>
    </header>
    <div class="mc" v-show="showCourseList" @click.stop="showCourseList=false">
      <ul class="courseList" @click.stop="showCourseList=true">
        <li v-for='(item,index) in courseList' :key='index' v-if="courseList.length>0" @click.stop="selectCourse(item,index)">
          <img :src="item.course_pic" width='29' height="31" alt="">
          <i>{{item.course_name}}</i>
        </li>
      </ul>
    </div>
    <div class="border-8"></div>
    <div class="box">
      <p>上传文件:</p>
      <table>
        <tr>
          <th>文件名称</th>
          <th>是否达标</th>
          <th>是否删除</th>
        </tr>
        <tr>
          <td>{{$route.query.name}}</td>
          <td class="goodSound">音质达标</td>
          <td></td>
        </tr>
      </table>
      <img src="../../image/add_course.png" height="25" alt="" style="margin-top: 25px;">
      <div class="add_course">
        <span>添加至课程:</span>
        <div @click="showCourseList=true" v-if="courseList.length>0">
          <img :src="seCourse.course_pic" width='29' height="31" alt="">
          <i>{{seCourse.course_name}}</i>
        </div>
      </div>
      <a class="creatNewCourse" @click="goCreateCourse()">
        <i>+</i>
        <span>创建新课程</span>
      </a>
      <img src="../../image/perfect_information.png" height="25" alt="" style="margin-top: 50px; clear: both">
      <div class="perfect_info" style="margin-bottom:20px">
        <span>视频名称:</span>
        <div>
          <textarea v-model='v_name'></textarea>
          <div>建议使用简洁明了的标题，请不要包含任何多余信息，不超过40个字.</div>
        </div>
      </div>
      <!-- <img src="../../image/perfect_information.png" height="25" alt="">
      <div class="perfect_info" style="margin-bottom:20px">
        <div class="uploadImg" style="height: 50px;">
          <div class="img" v-if="isShow">
            <img class="selectImg" :src="singleUrl1" width="50" height="50" />
          </div>
          <div class="upfileDiv">
            <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false" :on-success="(res,file)=>{
                                        return handleAvatarSuccess(res,file,1)
                                      }" :before-upload="beforeAvatarUpload">
              <img v-if="!singleUrl1" :src="singleUrl1" class="avatar">
              <i v-else class="avatar-uploader-icon">上传个人照片</i>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="perfect_info" style="margin-bottom:20px">
        <span>个人描述:</span>
        <div>
          <textarea v-model='v_desc' placeholder="填写个人介绍"></textarea>
        </div>
      </div> -->
      <label class="rule">
        <input type="radio" v-model="agreeRule" value="1" @click='changeRule()' />
        <i></i>
        我已阅读并同意
        <a class="blue">《知识产权承诺》</a>
      </label>
      <div class="btn">
        <a class="sendBtn" @click='sendVdo'>发布</a>
        <a class="cancelBtn" @click='goBack'>取消</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: true, //选择图片是否显示
        singleUrl1: require('../../image/bg_pic.png'), //封面
        courseList: [],
        totalNum: '', //已有的课程总数
        showCourseList: false, //选择课程列表是否显示 默认否
        seCourse: {}, //选择后的课程信息
        v_name: '',
        v_desc: '', //个人描述
        agreeRule: 0, //是否同意 0 否 1是

      }
    },
    components: {

    },
    methods: {
      delSelectImg() {
        this.isShow = false;
      },
      //上传图片  i 1是单节课图 2是系列课图
      handleAvatarSuccess(res, file, i) {
        if (res.state == 200) {
          console.log(res);
          if (i == 1) {
            this.singleUrl1 = res.result_origin;
          } else if (i == 2) {
            this.seriesUrl1 = res.result_origin
          }
        }
      },
      beforeAvatarUpload(file) {
        if (!/image\/\w+/.test(file.type)) {
          this.$utils._toast('请确保文件为图像类型');
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$utils._toast('上传图片不能超过5M');
          return false;
        }
      },
      //点击取消同意协议
      changeRule() {
        if (this.agreeRule) {
          this.agreeRule = 0;
        } else {
          this.agreeRule = 1;
        }
      },
      goBack() {
        this.$router.back();
      },
      //发布
      sendVdo() {
        if (this.agreeRule) {
          if (this.v_name) {
            this.seCourse.course_name = this.course_name;
            this.seCourse.url = this.$route.query.vdoUrl;
            const data = {
              cid: this.seCourse.id,
              url: this.$route.query.vdoUrl,
              userid: localStorage.getItem("loginMobile"),
              v_name: this.v_name,
            };
            this.$api.post(this.$api.baseURLSchool, "updatedata/video/add", data, r => {
              console.log(r);
              if (r.data.ret == 1) {
                this.$utils._toast("发布成功");
                this.$router.push({
                  path: '/myCourse'
                })
              }
            }, err => {
              console.log(err);
            })
          } else {
            this.$utils._toast("请输入视频名称");
          }

        } else {
          this.$utils._toast("请先同意协议");
        }

      },
      //从已有课程列表中选择
      selectCourse(item, index) {
        $("li").eq(index).addClass("active").siblings().removeClass();
        this.showCourseList = false;
        this.seCourse = item;
      },
           // 登录拦截
           isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      //根据用户id获取课程列表 不分页
      getCourseListByUid() { // type: 1是单节课 2是多节课
        this.userid = localStorage.getItem("loginMobile");
        this.$api.get(this.$api.baseURLSchool, "selectdata2/view_course_user?uid=" + this.userid, {}, r => {
          if (r.data.ret == 1) {
            this.courseList = r.data.info;
            this.seCourse = this.courseList[0];
          }
          if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
        }, err => {
          console.log(err);
        })
      },
      //跳到创建课程页面
      goCreateCourse() {
        this.$router.push({
        //   path: '/addCourse?hide'
          path: '/createCourse?type=hide&url='+this.$route.query.vdoUrl
        })
      },
    },
    created() {
      this.getCourseListByUid();
    }
  }

</script>
<style lang="scss" scoped>
  .uploadImg {
    display: flex;
    justify-content: space-between;

  }

  .avatar-uploader-icon {
    width: 0.5rem;
    height: 0.5rem;
    line-height: 0.25rem;
    font-size: 10px;
    display: inline-block;
    border: 1px dashed #eee;
  }

</style>
